<template>
	<el-dialog :title="title" :visible.sync="dialogVisible" :before-close="cancelDialog">
		<!-- <p>{{dialogInfo.key}}</p> -->
		<div v-show='isShow' id='main'></div>
		<div v-show='!isShow' class="imgWrap">
			<img :src="imgName" alt="这是个gif" />
			<router-link v-show='this.$route.fullPath=="/home?id=2"' to="/carExperiment">
				<el-button v-show="gifName"  style="margin-top:-10px;float: right;" type="primary">开始实验</el-button>
			</router-link>
		</div>
	</el-dialog>
</template>

<script>
	import echarts from 'echarts';
	export default {
		//父组件 传 过来的 值
		props: {
			dialogVisible: {
				type: Boolean,
				default: false
			},
			dialogInfo: {
				type: Object,
				default: {}
			},
			chargeModel:{
				type: String,
				default: '无引导充电模式'
			}
		},
		watch: {
			//监听 弹窗显示， 可以用来写 请求接口
			dialogVisible: function(newVal, oldVal) {
				if (newVal) {
					console.log(newVal);
					console.log(this.dialogInfo);
					if (this.dialogInfo) {
						console.log(this.dialogInfo)
						if (this.dialogInfo.icon == 'chargeStation') {
							this.title='电动汽车实验';
							// this.imgName = require("../../assets/img/home/gif/charge.gif");
							this.gifName = true
						} else if (this.dialogInfo.icon == 'guidao') {
							this.gifName = false
							this.title = '详细信息'
							if (this.dialogInfo.modelParameter[4].value == '打开') {
								// this.imgName = require("../../assets/img/home/gif/guidao.gif");
							} else {
								// this.imgName = require("../../assets/img/home/gif/guidaoClose.gif");
							}
						}
					}
				}
			},
			dialogInfo: function(newVal, oldVal) {
				this.isShow = false;
			},
			chargeModel: function(newVal, oldVal) {
				console.log(newVal)
				this.title = '负荷功率波动曲线'
				this.isShow = true;
				this.$nextTick(function() {
					if (newVal == '有序充电模式') {
						this.showLine2()
					} else if (newVal == '无引导充电模式') {
						this.showLine1()
					}
				})
			},
		},
		components: {},
		name: "componentDialog",
		data() {
			return {
				imgName: '',
				gifName: false,
				isShow: false,
				title: '负荷功率波动曲线',
			};
		},
		created() {},
		mounted() {
			console.log(this.$route)
		},
		methods: {
			//修改父组件传过来的值
			cancelDialog() {
				this.imgName = ""
				this.$emit("update:dialogVisible", false);
			},
			showLine1() {
				var main = echarts.init(document.getElementById('main'));
				main.clear()
				main.resize();
				echarts.init(document.getElementById('main')).setOption({
					animationEasing: 'elasticOut',
					animationDelayUpdate: function(idx) {
						return idx * 10;
					},
					label: {
						textStyle: {
							color: 'rgba(255, 255, 255, 0.3)'
						}
					},
					xAxis: {
						type: 'category',
						data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',
							'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
						],
						name: '时间',
						nameTextStyle: { // 名称样式
							fontSize: 12,
							color: '#fff',
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ffffff'
							}
						}
					},
					yAxis: {
						type: 'value',
						name: '有功功率(kW)',
						nameTextStyle: { // 名称样式
							fontSize: 12,
							color: '#fff',
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ffffff'
							}
						}
					},
					series: [{
						data: [279, 275.9, 271.25, 248, 240.25, 232.5, 234.05, 124, 93, 38.75, 93, 125.55, 93, 120.9, 190.65, 279,
							249.55, 217, 232.5, 410.75, 426.25, 387.5, 325.5, 310
						],
						type: 'line',
						smooth: true
					}]
				});
			},
			showLine2() {
				var main = echarts.init(document.getElementById('main'));
				main.clear()
				echarts.init(document.getElementById('main')).setOption({
					animationEasing: 'elasticOut',
					animationDelayUpdate: function(idx) {
						return idx * 10;
					},
					xAxis: {
						type: 'category',
						data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',
							'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
						],
						name: '时间',
						nameTextStyle: { // 名称样式
							fontSize: 12,
							color: '#fff',
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ffffff'
							}
						}

					},
					yAxis: {
						type: 'value',
						name: '有功功率(kW)',
						nameTextStyle: { // 名称样式
							fontSize: 12,
							color: '#fff',
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ffffff'
							}
						}

					},
					series: [{
						data: [240, 236, 230, 221, 209, 193, 173, 150, 136, 133, 146, 163, 186, 216, 246, 265, 248, 236, 276, 320,
							349, 340, 310, 275.85
						],
						type: 'line',
						smooth: true
					}]
				});
			}
		}
	};
</script>
<style scoped>
	.imgWrap {
		position: relative;
		width: 100%;
		height: 437.34px;
	}
	
	.imgWrap img {
		position: absolute;
	}
	
	.imgWrap button {
		position: absolute;
		bottom:10px;
		right:10px
	}
	
	#main {
		width: 700px !important;
		height: 437.34px;
	}

	#main div {
		width: 600px !important;
	}

	#main div canvas {
		width: 600px !important;
	}

	img {
		width: 100%;
		height: 100%;
	}

	canvas {
		width: 400px !important
	}
</style>
